@if (viewMode.showTimestamp) {
<div class="item" [ngClass]="{'highlight': showHighlight, 'search-active': data.searchHighlight}">
  <!-- @if (viewMode.showTimestamp) { -->
  <div class="time">{{ data.time }}</div>
  <div class="dir" [ngClass]="{ 'tx': data.dir == 'TX','sys':data.dir=='SYS' }">
    {{data.dir}}
  </div>
  <div class="data vsfont"
    [ngClass]="{ 'tx': data.dir == 'TX', 'sys':data.dir == 'SYS', error: data.data.includes('error:'),'nowrap': !viewMode.autoWrap }"
    [innerHTML]="viewMode.showHex||showHex ? (data.data | showHex) : (viewMode.showCtrlChar ? (data.data | showNR) : (data.data| addNewLine))">
  </div>
</div>
}@else{
<span class="data vsfont"
  [ngClass]="{ 'tx': data.dir == 'TX', 'sys':data.dir == 'SYS', error: data.data.includes('error:'),'nowrap': !viewMode.autoWrap }"
  [innerHTML]="viewMode.showHex ? (data.data | showHex) : (viewMode.showCtrlChar ? (data.data | showNR) : (data.data | addNewLine))">
</span>
}

@if (showMenu) {
<app-menu [menuList]="rightMenu" [position]="position" [width]="125" (closeEvent)="closeMenu()"
  (itemClickEvent)="menuClick($event)"></app-menu>
}